<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/haha.js"></script>
    <script src="/js/swiper-bundle.min.js"></script>
    <script src="/js/vue-awesome-swiper.js"></script>
    <!-- 引入Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- 引入Swiper依赖 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <title>登录</title>
    <style>
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.3s ease;
        }
        .fade-enter-from,
        .fade-leave-to {
            opacity: 0;
        }

        /* 去除number input的箭头 */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .login-change{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        .login-change button{
            padding: 10px 20px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-size: 20px;
            font-family:PingFang SC;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="min-h-screen flex items-center justify-center bg-gray-50">
            <div class="w-[1000px] min-h-[900px] flex items-center justify-center">
                <div class="flex w-full bg-white rounded-lg shadow-xl overflow-hidden login-all">
                    <!-- 左侧品牌区域 -->
                    <div class="w-2/5 bg-green-50 p-12 flex flex-col justify-between relative">
                        <div class="absolute top-8 left-8">
                            <h2 class="text-3xl font-bold text-green-700">生鲜优选</h2>
                            <p class="text-green-600 mt-2">新鲜食材，健康生活</p>
                        </div>
                        <img :src="brandImage" alt="生鲜配送" class="w-full h-auto object-cover mt-20"  />
                        <p class="text-green-700 text-xl font-medium text-center mt-8">
                            精选优质食材，为您的餐桌增添健康
                        </p>
                    </div>

                    <!-- 右侧登录区域 -->
                    <div class="w-3/5 p-12">
                        <div class="max-w-md mx-auto">
                            <h1 class="text-3xl font-bold text-gray-900 mb-8">欢迎登录生鲜优选</h1>
                            <div class="flex space-x-4 mb-6 login-change">
                                <button :class="{ 'text-green-600':isCodeLogin }" @click="isCodeLogin = true">密码登录</button>
                                <span class="text-gray-400" style="margin-top: 4px;">|</span>
                                <button :class="{ 'text-green-600':!isCodeLogin }" @click="isCodeLogin = false">验证码登录</button>
                            </div>
                            <form @submit.prevent="handleLogin" class="space-y-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        手机号码
                                    </label>
                                    <div class="relative">
                                        <input v-model="adminLogin.phone" type="tel"
                                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                            placeholder="请输入手机号码" />
                                    </div>
                                </div>
                                <div v-if="!isCodeLogin">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        验证码
                                    </label>
                                    <div class="flex space-x-4">
                                        <input v-model="adminLogin.code" type="text"
                                            class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                            placeholder="请输入验证码" />
                                        <button type="button" :class="[
                                            '!rounded-button whitespace-nowrap',
                                            'px-6 py-3 text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2',
                                            {'opacity-50 cursor-not-allowed': isCountingDown}
                                        ]" @click="sendCode" :disabled="isCountingDown">
                                            {{ countDownText }}
                                        </button>
                                    </div>
                                </div>
                                <div v-else>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        密码
                                    </label>
                                    <div class="relative">
                                        <input v-model="adminLogin.password" type="password"
                                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                            placeholder="请输入密码" />
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <input v-model="rememberMe" type="checkbox"
                                        class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" />
                                    <label class="ml-2 block text-sm text-gray-700">
                                        记住登录
                                    </label>
                                </div>
                                <button type="submit"
                                    class="!rounded-button whitespace-nowrap w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                    <i v-if="loading" class="fas fa-spinner fa-spin mr-2"></i>
                                    {{ loading ? '登录中...' : '登录' }}
                                </button>
                            </form>

                            <!-- 社交登录 -->
                            <div class="mt-8">
                                <p class="text-center text-sm text-gray-600 mb-4">其他登录方式</p>
                                <div class="flex justify-center space-x-6">
                                    <button v-for="(item, index) in socialIcons" :key="index"
                                        class="!rounded-button whitespace-nowrap p-2 text-gray-600 hover:text-green-600 hover:scale-110 transition-transform">
                                        <i :class="['fab', item.icon, 'text-2xl']"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 底部链接 -->
                            <div class="mt-8 flex items-center justify-between text-sm text-gray-600">
                                <div class="space-x-4">
                                    <a href="register.html" class="hover:text-green-600">立即注册</a>
                                    <a href="#" class="hover:text-green-600">忘记密码</a>
                                </div>
                                <div class="space-x-4">
                                    <a href="#" class="hover:text-green-600">用户协议</a>
                                    <a href="#" class="hover:text-green-600">隐私政策</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    adminLogin:{
                        phone: '',
                        password: '',
                        code: '',
                    },
                    rememberMe: false,
                    loading: false,
                    countdown: 60,
                    isCountingDown: false,
                    brandImage: '/img/left-login.png',
                    socialIcons: [
                        {
                            icon: 'fa-weixin',
                            name: '微信'
                        },
                        {
                            icon: 'fa-qq',
                            name: 'QQ'
                        },
                        {
                            icon: 'fa-alipay',
                            name: '支付宝'
                        }
                    ],
                    isCodeLogin: true
                };
            },
            computed: {
                countDownText() {
                    return this.isCountingDown ? `${this.countdown}秒后重新获取` : '获取验证码';
                }
            },
            methods: {
                async handleLogin() {
                        // 模拟登录请求
                        $.post(BASE_URL+'/admin/login',app.adminLogin,function(backData){
                            if(backData.code==200){    
                                alert('登录成功');
                                // window.location.href = 'home.html';
                            }else{    
                                alert(backData.msg);
                            }
                        })
                },
                async sendCode() {
                    if (this.isCountingDown) return;
                    if (!this.phone) {
                        alert('请输入手机号码');
                        return;
                    }
                    this.isCountingDown = true;
                    this.countdown = 60;
                    const timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            clearInterval(timer);
                            this.isCountingDown = false;
                        }
                    }, 1000);
                }
            }
        });
    </script>
</body>

</html>
    